<template>
  <div style="width: 100%; height: 100%; position: relative">
    <div id="barEcharts" style="width: 100%; height: 100%"></div>
    <div class="month-box">
      <a-month-picker
        size="small"
        style="width: 110px"
        placeholder="请选择月份"
        @change="handleonChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: "",
      // myChart:{}
      options: {
        color: ["#688CE9", "#A4BAF4"],
        legend: {
          data: ["营业额", "销售量"],
          right: "25%",
          top: "2%",
          itemWidth: 14,
          itemHeight: 14,
        },
        tooltip: {},
        xAxis: {
          data: [
            "税务局1",
            "税务局2",
            "税务局3",
            "税务局4",
            "税务局5",
            "税务局6",
            "税务局7",
          ],
          // axisLine: {onZero: true},
          splitLine: {
            show: false,
            lineStyle: {},
          },
          splitArea: { show: false },
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            color: "#303133",
          },
        },
        yAxis: {
          axisLabel: {
            formatter: (val) => {
              var vals;
              if (val > 10000) {
                vals = (val / 10000).toFixed(0) + "万";
              } else {
                vals = val;
              }
              return `${vals}`;
            },
          },
        },
        grid: {
          top: 80,
          left: "10%",
          bottom: 30,
          right: "1%",
        },
        itemStyle: {
          borderRadius: [5, 5, 0, 0],
        },
        series: [
          {
            name: "营业额",
            type: "bar",
            emphasis: {
              shadowBlur: 10,
              shadowColor: "rgba(0,0,0,0.3)",
            },
            data: [100000, 200000, 300000, 400000, 500000, 600000, 500000],
          },
          {
            name: "销售量",
            type: "bar",
            emphasis: {
              shadowBlur: 10,
              shadowColor: "rgba(0,0,0,0.3)",
            },
            data: [50000, 400000, 60000, 400000, 80000, 400000, 100000],
          },
        ],
      },
    };
  },
  mounted() {
    let _this = this;
    let myChart = _this.$echarts.init(document.getElementById("barEcharts"));
    let time;
    this.$nextTick(function () {
      time = setTimeout(() => {
        myChart.resize();
      }, 0);
      myChart.setOption(this.options);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    });
    clearTimeout(time);
  },
  methods: {
    handleonChange(data, dataString) {
      console.log(data, dataString);
    },
  },
};
</script>

<style lang="less" scoped>
.month-box {
  z-index: 1000;
  position: absolute;
  top: 5px;
  right: 0;
  font-size: 14px !important;
}
</style>
